<template>
  <teleport to="body">
    <div
      class="custom-popover"
      :style="{ top: position.top + 'px', left: position.left + 'px' }"
      ref="draggableDiv"
      v-drag
    >
      <div class="popover-content" ref="DivDom">
        <slot></slot>
      </div>
      <!-- <button @click="close">Close</button> -->
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, watch, nextTick, toRefs } from "vue";

const props = defineProps({
  position: {
    type: Object,
    default: () => ({
      top: 0,
      left: 0,
    }),
  },
});
const { position } = toRefs(props);

// const close = () => {
//   emit('close');
// };

const draggableDiv = ref<HTMLElement | null>(null);
const DivDom = ref<HTMLElement | null>(null);
watch(
  () => draggableDiv.value,
  () => {
    nextTick(() => {
      if (innerWidth - (DivDom.value.offsetWidth + position.value.left) < 0) {
        position.value.left = innerWidth - DivDom.value.offsetWidth - 50;
      }
      if (innerHeight - (DivDom.value.offsetHeight + position.value.top) < 0) {
        position.value.top = innerHeight - DivDom.value.offsetHeight - 50;
      }
      console.log(DivDom.value.offsetWidth, "444444");
    });
  },
  { deep: true }
);
let isDragging = false;
let startY = 0;
let startTop = 0;
let startX = 0;
let startLeft = 0;
const handleMouseDown = (event: MouseEvent) => {
  isDragging = true;
  startY = event.clientY;
  startTop = draggableDiv.value!.offsetTop; // 使用非空断言操作符 !
  startX = event.clientX;
  startLeft = draggableDiv.value!.offsetLeft; // 使用非空断言操作符 !
};

const handleMouseMove = (event: MouseEvent) => {
  // 鼠标移动事件处理函数

  if (isDragging && draggableDiv.value) {
    // 如果正在拖拽并且拖拽的元素存在

    const deltaY = event.clientY - startY;
    // 计算鼠标移动的纵向位移差

    const newTop = startTop + deltaY;
    // 计算新的垂直位置

    const deltaX = event.clientX - startX;
    // 计算鼠标移动的横向位移差

    const newLeft = startLeft + deltaX;
    // 计算新的水平位置

    const windowHeight = window.innerHeight;
    // 获取窗口的高度

    const divHeight = draggableDiv.value.offsetHeight;
    // 获取拖拽元素的高度

    const windowWidth = window.innerWidth;
    // 获取窗口的宽度

    const divWidth = draggableDiv.value.offsetWidth;
    // 获取拖拽元素的宽度

    const minTop = 10;
    // 最小垂直位置

    const maxTop = windowHeight - divHeight - 10;
    // 最大垂直位置

    const minLeft = 10;
    // 最小水平位置

    const maxLeft = windowWidth - divWidth - 10;
    // 最大水平位置

    const clampedTop = Math.max(minTop, Math.min(newTop, maxTop));
    // 将新的垂直位置限制在最小最大值范围内

    const clampedLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));
    // 将新的水平位置限制在最小最大值范围内

    draggableDiv.value.style.top = `${clampedTop}px`;
    // 设置拖拽元素的 top 值

    draggableDiv.value.style.left = `${clampedLeft}px`;
    // 设置拖拽元素的 left 值
  }
};

const handleMouseUp = () => {
  isDragging = false;
};
onMounted(() => {
  // if (draggableDiv.value) {
  //   draggableDiv.value.addEventListener('mousedown', handleMouseDown);
  //   document.addEventListener('mousemove', handleMouseMove);
  //   document.addEventListener('mouseup', handleMouseUp);
  // }
});
</script>

<style scoped>
.custom-popover {
  position: absolute;
  z-index: 4999;
}

.popover-content {
  /* 样式可根据需要自行定义 */
}

button {
  cursor: pointer;
  margin-top: 10px;
}
</style>
